﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>查看图片</title>
    <link href="/Content/css/styles.css" rel="stylesheet" />
    <script src="/Scripts/Jquery/jquery-1.10.2.js"></script>
    <script src="/Content/js/e-smart-zoom-jquery.min.js"></script>
    <script>
        //获取url参数  name:参数名称
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]); return null;
        }
        var url = GetQueryString("imgUrl");
        var _left = GetQueryString("left");
        $(document).ready(function () {
            $("#imageFullScreen").attr("src", url);
            //$('#imgContainer').css("transform", 'rotate(' + _left + 'deg)');

            $('#imageFullScreen').smartZoom({ 'containerClass': 'zoomableContainer' });

            $('#topPositionMap,#leftPositionMap,#rightPositionMap,#bottomPositionMap').bind("click", moveButtonClickHandler);
            $('#zoomInButton,#zoomOutButton').bind("click", zoomButtonClickHandler);

            function zoomButtonClickHandler(e) {
                var scaleToAdd = 0.8;
                if (e.target.id == 'zoomOutButton')
                    scaleToAdd = -scaleToAdd;
                $('#imageFullScreen').smartZoom('zoom', scaleToAdd);
            }

            function moveButtonClickHandler(e) {
                var pixelsToMoveOnX = 0;
                var pixelsToMoveOnY = 0;

                switch (e.target.id) {
                    case "leftPositionMap":
                        pixelsToMoveOnX = 50;
                        break;
                    case "rightPositionMap":
                        pixelsToMoveOnX = -50;
                        break;
                    case "topPositionMap":
                        pixelsToMoveOnY = 50;
                        break;
                    case "bottomPositionMap":
                        pixelsToMoveOnY = -50;
                        break;
                }
                $('#imageFullScreen').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);
            }


            //图片右转
            var currentRight = 0;
            //左转
            $("#zoomLeftButton").on("click", function () {
                event.stopPropagation();
                currentRight = (currentRight - 90) % 360;
                $('#imgContainer').css("transform", 'rotate(' + currentRight + 'deg)');
            })
            //右转
            $("#zoomRightButton").on("click", function () {
                event.stopPropagation();
                currentRight = (currentRight + 90) % 360;
                $('#imageFullScreen').css("transform", 'rotate(' + currentRight + 'deg)');
            })
        });
    </script>
</head>
<body>
    <div id="page">
        <div id="pageContent">
            <div id="imgContainer">
                    <img id="imageFullScreen"/>
            </div>
            <div id="positionButtonDiv">
                <!--<p style="margin-top:10px">
                    <span>
                        <img id="zoomLeftButton" class="zoomButton" src="../Images/left.png" title="zoom in" style="width:27px; height:23px;" />
                        <img id="zoomRightButton" class="zoomButton" src="../Images/right.png" title="zoom out" style="width:27px; height:23px;" />
                    </span>
                </p>-->
                <p>
                    <span>
                        <img id="zoomInButton" class="zoomButton" src="../Images/zoomIn.png" title="zoom in" alt="zoom in" />
                        <img id="zoomOutButton" class="zoomButton" src="../Images/zoomOut.png" title="zoom out" alt="zoom out" />
                    </span>
                </p>
                <p>
                    <span class="positionButtonSpan">
                        <map name="positionMap" class="positionMapClass">
                            <area id="topPositionMap" shape="rect" coords="20,0,40,20" title="move up" alt="move up" />
                            <area id="leftPositionMap" shape="rect" coords="0,20,20,40" title="move left" alt="move left" />
                            <area id="rightPositionMap" shape="rect" coords="40,20,60,40" title="move right" alt="move right" />
                            <area id="bottomPositionMap" shape="rect" coords="20,40,40,60" title="move bottom" alt="move bottom" />
                        </map>
                        <img src="../Images/position.png" usemap="#positionMap" />
                    </span>
                </p>
            </div>
        </div>
    </div>
    <footer></footer>

</body>
</html>
